<template>
    <div class="webNavi">
        <div class="navi-container">
            <div class="navi-content float-left">
                <span class="navi-title">题必解 TBJie</span>
                <span class="navi-item">首页</span>
                <span class="navi-item">
                    问题分类 <b class="fa fa-caret-down"></b>
                </span>
                <span class="navi-item">题库</span>
                <span class="navi-item">留言</span>
                <span class="navi-item">消息</span>
                <span class="navi-item">我的文章</span>
                <span class="navi-item">关于</span>
            </div>
            <div class="navi-search float-right">
                <!-- <span class="navi-user-icon"></span> -->
                <div class="search-box">
                    <span class="search-icon fa fa-search"></span>
                    <input
                        type="text"
                        class="navi-search-input"
                        placeholder="搜索"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "webNavi",
};
</script>

<style lang="scss" scoped>
.webNavi{
    width: 100%;
    height: 60px;
    background-color: #fff; //#38a3db
    box-shadow: 0px 0px 5px #c0c0c0;
    .navi-container {
        width: 78%;
        height: 100%;
        margin: auto;
        // border: 1px solid red;
        user-select: none;
        .navi-content {
            .navi-title {
                line-height: 60px;
                vertical-align: middle;
                // display: inline-block;
                font-size: 18px;
                font-weight: bold;
                color: #3172db;
                margin-right: 40px;
            }
            .navi-item {
                line-height: 50px;
                vertical-align: middle;
                margin-right: 20px;
                font-size: 13px;
                font-weight: bold;
                color: #616161;
                &:hover {
                    color: #3172db;
                }
            }
        }
        .navi-search {
            .search-box {
                display: block;
                float: left;
                position: relative;
                width: 200px;
                height: 30px;
                margin-top: 14px;
                color: #000;
                background-color: #fff;
                border: 1px solid #bebebe;
                border-radius: 20px;
                padding-left: 5px;
                overflow: hidden;
                .search-icon {
                    display: inline-block;
                    position: absolute;
                    top: 18%;
                    left: 5%;
                    // color: #bebebe;
                }
                input {
                    position: absolute;
                    top: -5%;
                    left: 17%;
                    width: 150px;
                    height: 30px;
                    line-height: 30px;
                    border: none;
                    outline: none;
                    font-size: 13px;
                    color: #3a3a3a;
                }
            }
        }
    }
}
</style>